<template>
  <div class="app">
    <RouterView></RouterView>
    <Footer v-if="route.meta.hideTabBar" />
  </div>
</template>

<script setup lang="ts" name="App">
import Footer from './components/Footer.vue'
// 获取路由
import { useRoute } from 'vue-router'

const route = useRoute()

</script>

<style lang="less">
@gabelBgColor : rgb(181, 202, 161);

.app{
  position: relative;
}

// 设置全局背景色
html {
  background-color: rgb(250, 250, 250);
}

// 设置主体容器
.main-box {
  height: 100vh;
}

// 设置导航栏
.van-nav-bar {
  --van-nav-bar-background: none;
}

.van-nav-bar::after {
  border: none;
}

// 设置支出收入字体颜色
.expenses-text {
  color: red;
}

.income-text {
  color: rgb(71, 168, 128);
}

// 设置面板
.panel {
  padding: 20px;
  border-radius: 30px;
  box-shadow: 0 0 10px 3px rgb(221, 221, 221);
  background-color: #fff;
  margin-bottom: 30px;
}

// 设置标签页
.van-tabs__nav {
  border: none !important;
  background-color: @gabelBgColor !important;
}

// 通用分类标签设置
.common-category {
  .van-nav-bar__title{
    width: 100%;
    max-width: 100%;
    margin: 0 40px;
  }
  .van-tabs__nav {
    background-color: rgb(250,250,250) !important;
  }
}

// 存钱计划、购物清单 标签设置
.savingsPlan,.shoppingList{
  .van-tabs__nav {
    background-color: rgb(250,250,250) !important;
  }
}

.van-tab {
  margin: 5px !important;
  padding: 10px 20px !important;
  border-radius: 20px !important;
  border: none !important;
}

// 设置分类图标
.category-icon {
  img {
    width: 60px;
  }
}

// 设置添加子分类图标
.addsc-title{
  img {
    width: 40px;
  }
}

// 设置分页栏
.van-nav-bar__content {
  height: 120px !important;
}

.van-tab__text {
  font-size: 25px;
}

// 设置input框溢出样式
input {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

// 轻提示
.van-toast{
  padding: 10px 30px;
  border-radius: 30px;
  background-color: rgb(71, 71, 71) !important;
  color: #fff;
}
.van-toast__text {
  font-size: 30px;
}

// 弹出层 van-popup 先注释，后续看影响了什么地方
// .van-popup{
//   padding: 0 !important;
//   border-top-left-radius: 50px !important;
//   border-top-right-radius: 50px !important;
// }

// vue工具
.vue-devtools__panel{
  display: none !important;
}
</style>